import React from 'react';
import PropTypes from 'prop-types';
import Helper from '../../../components/Helper';
import { Link } from 'react-router-dom';
import AviliableTab from './AviliableTab';
import s from './Aviliable.module.css';
import cn from 'classnames';
import fetch from 'API/fetch';
export default function Aviliable({ className, data, taskIdMap, jobMap }) {
	const [httpInfo, setHttpInfo] = React.useState([]);
	const [pingInfo, setPingInfo] = React.useState([]);
	const [toUrl, setToUrl] = React.useState('/job-manage/aviliable-task');
	async function getData(taskType) {
		const ping = await fetch(`/api/v2/index/get_top_ava/ping`, {
			method: 'GET',
		}).catch(e => {
			return {};
		});
		if (ping.code === 200) {
			setPingInfo(ping.results.ping);
		}
		const http = await fetch(`/api/v2/index/get_top_ava/http`, {
			method: 'GET',
		}).catch(e => {
			return {};
		});
		if (http.code === 200) {
			setHttpInfo(http.results.http);
			if (ping.results.ping.length > http.results.http.length) {
				setToUrl('/job-manage/aviliable-task');
			}
		}
	}
	React.useEffect(() => {
		getData();
	}, []);
	return (
		<div className={cn(className, s.aviliable)}>
			{' '}
			<div className={s.label}>
				<div className={s.title}>
					<span className={s.text}>可用性异常任务TOP10</span>
					<Helper
						placement="top"
						overlay="可用性任务最近12小时平均可用率TOP榜"
					/>
				</div>
				<div className={s.more}>
					<Link to={toUrl}>{'更多>'}</Link>
				</div>
			</div>
			<div className={s.avBox}>
				<AviliableTab task="http" info={httpInfo}></AviliableTab>
				<AviliableTab task="ping" info={pingInfo}></AviliableTab>
			</div>
		</div>
	);
}

Aviliable.propTypes = {
	className: PropTypes.string,
	data: PropTypes.arrayOf({
		http: PropTypes.array,
		ping: PropTypes.array,
	}),
	taskIdMap: PropTypes.object,
	jobMap: PropTypes.object,
};

Aviliable.defaultProps = {
	className: s.aviliable,
};
